<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title>选框</title>
    </head>
    <body>
        <input type="checkbox" id="n2" onclick="set();"/>全选/全不选<br/><hr/>
 
        <input type="checkbox" name="nn" />羽毛球<br/>
        <input type="checkbox" name="nn" />蓝球<br/>
        <input type="checkbox" name="nn" />橄榄球<br/>
        <input type="checkbox" name="nn" />乒乓球<br/>
        <input type="checkbox" name="nn" />足球<br/>
        <input type="checkbox" name="nn" />棒球<br/><hr/>

        <input type="button" value="全选" onclick="setAll();" />
        <input type="button" value="全不选" onclick="setNone();" />
        <input type="button" value="反选" onclick="setBack();" />

        <script type="text/javascript">
            function setAll() {
                var a=document.getElementsByName("nn");//先获取input多选框
                //获取的a是个数组，遍历这个数组，设置checked属性
                for(var i=0;i<a.length;i++){
                    a[i].checked=true;//checked为true时是选中，false时是未选中
                }
            }
            function setNone() {
                var a=document.getElementsByName("nn");
                for(var i=0;i<a.length;i++){
                    a[i].checked=false;
                }
            }
            function setBack() {
                var c=document.getElementsByName("nn");
                for(var i=0;i<c.length;i++){
                    if(c[i].checked==true){
                        c[i].checked=false;
                    }
                    else{
                        c[i].checked=true;
                    }
                }
            }
            function set() {
                var d=document.getElementById("n2");
                if(d.checked==true){
                    setAll();//直接调用已有的方法，设置checked属性
                }
                else{
                    setNone();
                }
            }
 
        </script>
 
    </body>
</html>